<!--
 * @Date: 2023-02-20 14:57:32
 * @LastEditTime: 2023-06-23 11:56:37

 * 介绍:
-->
<script lang="ts" setup>
import type { StateType } from "./index";
export interface Props {
  type?: StateType;
  message?: string;
}
const props = defineProps<Props>();
</script>

<template>
  <div class="ClistState">
    <template v-if="props.type == 'null'">
      <van-empty
        class="ClistState__null"
        :description="props.message || $t(`mei-you-gen-duo-shu-ju-le`)"
      />
    </template>
    <template v-else-if="props.type == 'loading'">
      <van-loading class="ClistState__loading" size="32rem">
        {{ props.message || "loading..." }}
      </van-loading>
    </template>
    <template v-else-if="props.type == 'error'">
      <van-empty
        class="ClistState__error"
        image="error"
        :description="props.message || 'request error'"
      />
    </template>
    <template v-else-if="props.type == `end`">
      <div class="ClistState__end">
        {{ props.message || $t(`mei-you-gen-duo-shu-ju-le`) }}
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.ClistState {
  margin-top: var(--gap-md);
  .ClistState__null {
    margin-top: 100rem;
  }
  .ClistState__error {
    margin-top: 100rem;
  }
  .ClistState__end {
    color: #aaa;
    text-align: center;
  }
  .ClistState__loading {
    text-align: center;
  }
}
</style>
